<template>
	<view class="head">
		<view class="back" @click="goBack">
			<image src="@/static/public/arrow_left_000000.png" mode="heightFix"></image>
		</view>
		<view class="title">设置</view>
		<view class="placeholder"></view>
	</view>
	<view class="regionalization">
		<view class="line">
			<view class="text">账号与安全</view>
			<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line">
			<view class="text">消息通知</view>
			<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line">
			<view class="text">清理缓存</view>
			<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line last">
			<view class="text">检查更新</view>
			<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
	</view>
	<view class="regionalization">
		<view class="line">
			<view class="text">帮助与反馈</view>
			<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
		<view class="line last">
			<view class="text">关于软件</view>
			<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
	</view>
	<view class="regionalization">
		<view class="line last" @click="quitLogin = true">
			<view class="text">退出登录</view>
			<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
		</view>
	</view>
	<up-modal :show="quitLogin" :showCancelButton="true" @cancel="quitLogin = false" :closeOnClickOverlay="true"
		@close="quitLogin = false" @confirm="quitLoginConfirm">
		<view class="quitText" style="width: 600rpx;">退出登录后，您本地的账号信息和数据内容都将清空，是否继续？</view>
	</up-modal>
</template>
<script setup>
	import { ref } from 'vue';
	import api from '@/utlis/api.js';
	import WebsocketUtil from "@/utlis/websocket"

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}  
	const quitLogin = ref(false);
	const quitLoginConfirm = () => {
		let token = uni.getStorageSync('token');
		api("app/logout", "POST").then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '退出登录成功',
					icon: 'none',
					duration: 2000
				});
				uni.$store.commit("resetAllState");
				uni.$store.commit("closeSocket");
				uni.$store.commit("clearrSocket");
				uni.switchTab({ url: "/pages/home/index" });
			}
		})

	}
</script>
<style lang="scss">
	.head {
		display: flex;
		flex-wrap: wrap;
		padding: 85rpx 30rpx 20rpx 30rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

		.back,
		.placeholder {
			width: 100rpx;

			image {
				height: 35rpx;
			}
		}

		.title {
			width: 490rpx;
			text-align: center;
		}
	}

	.regionalization {
		margin: 40rpx 30rpx 0 30rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

		.line {
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #BCBCBC;
			align-items: center;
			margin: 0 30rpx;

			.text {
				line-height: 110rpx;
				width: 600rpx;
			}

			image {
				height: 20rpx;
			}
		}

		.last {
			border: 0 solid rgba(0, 0, 0, 0);
		}

	}
</style>